<template>
  <div class="header">
    <div class="header-container">
      <div class="container">
        <div class="logo">
          <!-- <a href="/">
            <img src="../assets/logo.png" alt="" />
          </a> -->
          <!-- 由于a标签会触发页面刷新，所以路由我们必须使用自带的标签 -->
          <router-link :to="{name:'Home'}"><img src="../assets/logo.png" alt="" /><span class="header-left__title">爱宠邦管理系统</span></router-link>
        </div>
        <div class="user" >
         <span>欢迎您：</span> {{user.userAccount}}
          <a href="" @click.prevent="handleLoginOut">退出</a>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'

export default{
  computed: {
    //使用解构运算符直接分解原来对象中的属性到新对象中
    ...mapState("loginUser",{
      user:"data",
      isLogin:"isLoading"
    }),

  },
  created(){
    console.log("------");
    console.log(this.user);
  },
  methods:{
    handleLoginOut(){
        this.$confirm('你确定要退出登录吗?', '登出', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          setTimeout(() => {
          this.$store.dispatch("loginUser/loginOut");
          window.localStorage.clear();
          this.$router.push('/login')
        },500).catch(err => err)
        })
    }
  }
}
</script>

<style scoped>
.header {
  height: 60px;
}
.header-container {
  height: 60px;
  background:#34aba7;
  color: #fff;
  line-height: 60px;
  position: fixed;
  z-index: 100;
  left: 0;
  top: 0;
  width: 100%;
  display: flex;
}
.container {
  width:98%;
  display: flex;
  justify-content:space-between;
}
.logo a {
  display: flex;
  align-items: center;
  height: 100%;
}
.logo img {
  width: 45px;
  height: 45px;
  border-radius:50% ;
}
.nav {
  margin: 0 60px;
  display: flex;
  flex-grow: 1;
}
.nav a {
  display: block;
  padding: 0 30px;
}
.nav .router-link-exact-active {
  color: #fcb85f;
}
.user {
  font-size: 16px;
}
.user a{
  margin-left:10px ;
}
.user a:hover{
  color: red;
}
.header a {
  color: #fff;
}
.header-left__title{
  position:absolute;
  margin-left: 60px;
}
a:hover{
  color:rgb(204, 193, 193);
}

</style>
